<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>公告详情</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    .wrapper {
      padding-top: 0;
    }
    
    [v-cloak] {
      display: none;
    }
    
    .m-container-box {
      padding: 20px 30px;
      box-sizing: border-box;
      min-height: 700px;
      background: #fff url(images/logo_ts.png) no-repeat 97% 95%;
    }

    .h1-title {
      margin: 10px 0 20px;
      color: #333;
      font-size: 16px;
      line-height: 16px;
      text-indent: -8px;
    }

    .nd-box .time {
      margin-bottom: 20px;
      font-size: 12px;
      color: #999;
    }

    .nd-box .content {
      padding-top: 20px;
      border-top: 2px solid #eee;
    }

    .nd-box .content .notice-wrap {
      margin-bottom: 34px;
      line-height: 28px;
      font-size: 14px;
      color: #666;
      text-align: justify;
    }

    .head_top {
      width: 100%;
      height: 50px;
      background: #fff;
      box-shadow: 0 1px 5px #ddd;
      margin-bottom: 30px;
    }

    .head-center {
      position: relative;
    }

    .back-btn {
      display: block;
      width: 40px;
      height: 40px;
      transform: translateY(5px);
      background: transparent url(images/lp1.png) no-repeat center;
    }

    .back-btn:hover {
      background: transparent url(images/lp2.png) no-repeat center;
    }

    .m-btn {
      width: 200px;
      height: 30px;
      position: absolute;
      top: 10px;
      right: 0;
    }

    .m-btn .btn {
      display: inline-block;
      text-align: center;
      font-size: 12px;
      width: 72px;
      height: 30px;
      color: #666;
      background: #fff;
      cursor: pointer;
      border-radius: 5px;
      border: 1px solid #eee;
      padding: 0 5px 0 19px;
      transition: .25s;
    }

    .m-btn .btn:hover {
      color: #0e9cf2;
      border: 1px solid;
    }

    .m-btn .prev-btn {
      margin-right: 35px;
      background: transparent url(images/lc1.png) no-repeat 8px 10px;
    }

    .m-btn .prev-btn:hover {
      background: transparent url(images/lc2.png) no-repeat 8px 10px;
    }

    .m-btn .next-btn {
      background: transparent url(images/rc1.png) no-repeat 8px 10px;
    }

    .m-btn .next-btn:hover {
      background: transparent url(images/rc2.png) no-repeat 8px 10px;
    }
  </style>
</head>

<body>
  <div class="wrapper" id="app" file-name="notice_detail">
    <div class="head_top">
      <div class="center head-center">
        <a class="back-btn" href="javascript:;" @click="G.to('notice')"></a>
        <div class="m-btn">
          <button class="btn prev-btn" @click="changeArticle(0)">上一篇</button>
          <button class="btn next-btn" @click="changeArticle(1)">下一篇</button>
        </div>
      </div>
    </div>
    <div class="m-container-box nd-box center">
      <h1 class="h1-title">{{noticeTitle}}</h1>
      <div class="time">{{noticeTime}}</div>
      <div class="content">
        <div class="notice-wrap" v-html="TextContent"></div>
      </div>
    </div>
  </div>

  <script src="js/iview.min.js"></script>
  <script src="js/global.js"></script>
  <script src="js/axios.min.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        noticeId: 1,
        noticeCount: 3,
        noticeTitle: '',
        noticeTime: '',
        TextContent: '',
      },
      methods: {
        init() {
          this.setId()
          this.requestList()
        },
        // 提交数据
        requestList(pn) {
          var realUrl = '/user/findNotice'
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/xp' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          
          var ydata = {
            id: this.noticeId,
            type: arguments.length ? pn : null,
          }
          
          var data = G.paramsSerializer(ydata)
          axios.post(url, data)
            .then( res => {
              if (res.data.code == 1) {
                this.noticeTitle = res.data.data.title
                this.noticeTime = G.getFormatTime(res.data.data.createTime)
                this.TextContent = res.data.data.content
                this.noticeId = res.data.data.id
                if(arguments.length) {
                  top.location.hash = top.location.hash.slice(1).match(/.+?&/) + this.noticeId
                  localStorage.setItem('notic_detail_id', this.noticeId);
                }
              } else {
                this.$Message.error('没有了')
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        setId() {
          var hash = top.location.hash.slice(1)
          if (hash) {
            var ls_id = localStorage.getItem('notic_detail_id')-0;
            this.noticeId = /^.+?(\d+)$/.test(hash) ? hash.replace(/^.+?(\d+)$/, '$1') : ls_id || 1
            top.location.hash = 'notice_detail&' + this.noticeId
          }
        },
        changeArticle(type) {
          this.requestList(type)
        },
      },
      computed: {
        
      },
      mounted() {
        this.init()
      }
    })
  </script>
</body>

</html>